<form [formGroup]="form" (ngSubmit)="onSubmit()">
	<ion-header [translucent]="true">
		<ion-toolbar>
			<ion-buttons slot="start">
				<ion-button (click)="close()">
					<ion-icon slot="start" name="close-circle"></ion-icon>
					关闭
				</ion-button>
			</ion-buttons>
			<ion-title>连接</ion-title>
			<ion-buttons slot="end">
				<ion-button color="danger" (click)="del(conn.id)" *ngIf="conn.id">
					<ion-icon slot="start" name="trash"></ion-icon>
					删除
				</ion-button>
				<ion-button type="submit" color="primary" [disabled]="!form?.valid">
					<ion-icon slot="start" name="checkmark-circle"></ion-icon>
					确定
				</ion-button>
			</ion-buttons>
		</ion-toolbar>
	</ion-header>

	<ion-header collapse="condense">
		<ion-toolbar>
			<ion-title size="large">连接</ion-title>
		</ion-toolbar>
	</ion-header>

	<ion-list>
		<ion-item>
			<ion-icon name="bookmark" slot="start"></ion-icon>
			<ion-label>连接名称</ion-label>
			<ion-input formControlName="name" #user></ion-input>
			<app-item-error [form]="form" name="name"></app-item-error>
		</ion-item>
		<ion-item>
			<ion-icon name="home" slot="start"></ion-icon>
			<ion-label>地址及端口</ion-label>
			<ion-input formControlName="address"></ion-input>
			<app-item-error [form]="form" name="address"></app-item-error>
		</ion-item>
		<ion-item>
			<ion-icon name="person" slot="start"></ion-icon>
			<ion-label>数据库用户</ion-label>
			<ion-input formControlName="username"></ion-input>
			<app-item-error [form]="form" name="username"></app-item-error>
		</ion-item>
		<ion-item>
			<ion-icon name="key" slot="start"></ion-icon>
			<ion-label>数据库密码</ion-label>
			<ion-input formControlName="password" type="password"></ion-input>
			<app-item-error [form]="form" name="password"></app-item-error>
		</ion-item>
		<ion-item>
			<ion-icon name="layers" slot="start"></ion-icon>
			<ion-label>数据库</ion-label>
			<ion-input formControlName="schema"></ion-input>
			<app-item-error [form]="form" name="schema"></app-item-error>
		</ion-item>
		<ion-item>
			<ion-icon name="language" slot="start"></ion-icon>
			<ion-label>字符集</ion-label>
			<ion-select formControlName="charset" okText="确定" cancelText="取消">
				<ion-select-option *ngFor="let c of charsets" [value]="c">
					{{ c }}
				</ion-select-option>
			</ion-select>
			<app-item-error [form]="form" name="charset"></app-item-error>
		</ion-item>
	</ion-list>
</form>
